// @import '~taro-parse/dist/style/main.scss';

.card_container_A {
  position: relative;
  background-color: #ffffff;
  border-radius: 12px;
  margin: 0 20px;
  margin-bottom: 20px;


  .todo_icon {
    position: absolute;
    top: 24px;
    left: 24px;
    width: 56px;
    height: 56px;
    background-color: #d9feeb;
  }



  .todo-type1 {
    background: url(../../images/type-1.svg) no-repeat;
    background-size: contain;
  }

  .todo-type2 {
    background: url(../../images/type2.svg) no-repeat;
    background-size: contain;
  }

  .todo-type3 {
    background: url(../../images/type-3.svg) no-repeat;
    background-size: contain;
  }

  .todo-type4 {
    background: url(../../images/type-4.svg) no-repeat;
    background-size: contain;
  }

  .todo_body {
    padding: 27px 44px 30px 84px;

    .title_box {
      display: flex;
      align-items: center;

      .title {
        line-height: 44px;
        font-size: 30px;
        color: #252525;
      }

      .dead_time {
        display: inline-block;
        margin-left: 5px;
        padding: 0 10px;
        height: 44px;
        line-height: 44px;
        font-weight: normal;
        background-color: rgba(#ff6600, 0.08);
        color: #ff6600;
      }

    }

    .content {
      line-height: 36px;
      font-size: 26px;
      color: #999999;
      margin-top: 16px;
    }

    .time {
      display: flex;
      align-items: center;
      margin-top: 15px;
      font-size: 24px;
      color: #999999;

      .line {
        width: 1px;
        height: 16px;
        background-color: #d9d9d9;
        margin: 0 15px;
      }
    }
  }

  .cutdown {
    position: absolute;
    right: 0;
    top: 28px;
  }
}

.card_container_B {
  position: relative;
  width: 100vw;
  background-color: #ffffff;
  border-radius: 12px;
  font-size: 24px;

  .todo_icon_active,
  .todo_icon {
    position: absolute;
    top: 43px;
    left: 24px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
  }

  .todo_icon_active {
    background-color: #f64545;
  }

  .todo_icon {
    background-color: #cccccc;
  }

  .urgent_txt {
    margin: 0 5px;
    color: #ff0202;
  }

  .lg_badge_B {
    width: auto;
    padding: 0 10px;
  }

  .todo_body {
    padding: 20px 40px 28px 50px;

    .title {
      vertical-align: middle;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 34px;
      line-height: 48px;
      color: #252525;

      .urgent_txt {
        display: inline-block;
      }

      // margin-bottom: 20px;
    }

    .content {
      margin-top: 20px;
      font-size: 24px;
      color: #333333;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }

    .footer {
      margin-top: 15px;
      display: flex;
      align-items: center;

      .publisher {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #999999;
        border-right: 1px solid #e3e3e3;
      }

      .line {
        width: 1px;
        height: 16px;
        background-color: #d9d9d9;
        margin: 0 15px;
      }

      .time {
        color: #999999;
      }

      .already_read {
        color: #999999 !important;
      }

      .no_read {
        color: #ff6600;
      }
    }
  }

  .already_read {
    color: #666666 !important;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 92vw;
    height: 1px;
    background-color: #e3e3e3;
    border-radius: 1px;
    opacity: 0.72;
  }
}

.card_container_C {
  position: relative;
  width: 100vw;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 30px 36px 0px 31px;
  box-sizing: border-box;
  font-size: 24px;

  .main_body {
    padding-bottom: 20px;
    border-bottom: 1px solid #e3e3e3;

    .title {
      font-size: 30px;
      margin-bottom: 20px;
      color: #333333;
    }

    .footer {
      display: flex;
      align-items: center;

      .line {
        width: 1px;
        height: 16px;
        margin: 0 16px;
        background-color: #d9d9d9;
      }

      .content,
      .time {
        color: #999999;
      }
    }
  }
}

.card_container_D {
  position: relative;
  width: 100vw;
  padding-left: 96px;
  box-sizing: border-box;
  border-bottom: 1px solid #f2f2f2;

  .cardbody {
    padding: 29px 24px;

    .avatar {
      position: absolute;
      top: 33px;
      left: 24px;
      width: 74px;
      height: 74px;
      border-radius: 100%;
      background-image: url(../../../images/DiscussionGroup-bg.png);
      background-size: contain;
    }

    .name {
      max-width: 280px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 32px;
      line-height: 40px;
    }

    .content {
      display: inline-block;
      height: 40px;
      max-width: 486px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 26px;
      line-height: 40px;
      color: #999999;
    }

    .right_sign {
      position: absolute;
      right: 32px;
      bottom: 38px;
      display: flex;
      align-items: center;

      .shield {
        width: 22px;
        height: 22px;
        background: url(../../../images//禁止.png);
        background-size: contain;
      }

      .news_point {
        width: 12px;
        height: 12px;
        margin-left: 20px;
        background-color: #ff4000;
        border-radius: 6px;
      }

      .nodisturb {
        width: 22px;
        height: 24px;
        background: url(../../../images/免打扰.png) no-repeat;
        background-size: contain;
      }

      .mes_count {
        // width: 32px;
        padding: 0 10px;
        color: #fff;
        height: 32px;
        color: #fff;
        text-align: center;
        line-height: 32px;
        background-color: #ff4000;
        border-radius: 16px;
      }

      &:last-child {
        margin-right: 0 !important;
      }
    }

    .time {
      position: absolute;
      top: 25px;
      right: 23px;
      font-size: 22px;
      color: #989898;
    }
  }

  .bubble {
    position: absolute;
    top: -67px;
    left: 16px;
    // width: 319px;
    height: 55px;
    line-height: 55px;
    border-radius: 10px;
    z-index: 999;
    background-color: rgba($color: #000000, $alpha: .8);
    box-sizing: border-box;

    .text {
      color: #ffffff;
      padding: 15px 24px;
      height: 100%;
      box-sizing: border-box;
    }

    .del,
    .shield {
      border-right: 1px solid rgba($color: #fff, $alpha: .5);
    }

    &::after {
      content: '';
      position: absolute;
      bottom: -11px;
      left: 71px;
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
      border-top: 11px solid rgba($color: #000000, $alpha: .8);
    }
  }

  .none {
    display: none;
  }

  &::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 92vw;
    height: 1px;
    background-color: #e3e3e3;
    border-radius: 1px;
    opacity: 0.72;
  }
}

.card_container_E {
  position: relative;
  width: 100vw;
  // min-height: 16vh;
  display: inline-block;
  background-color: #ffffff;
  border-radius: 12px;
  font-size: 24px;

  .img_container {
    float: left;
    width: 22%;

    // height: 13vh;
    .todo_img {
      // position: absolute;
      border-radius: 8px;
      float: left;
      margin: 25px 10px 10px 25px;
      width: 128px;
      height: 128px;
    }

  }


  .lg_badge_B {
    width: auto;
    padding: 0 10px;
  }

  .todo_body {
    width: 70%;
    float: right;
    padding: 20px 40px 1px 0px;

    .title {
      vertical-align: middle;
      // white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 30px;
      line-height: 40px;
      color: #000000;
      // margin-right: 10px;

      .urgent_txt {
        display: inline-block;
      }

      .already_release {
        color: #009900;
        font-size: 20px;
        line-height: 34px;
        display: inline-flex;
        background-color: rgba(#009900, 0.08);
        border-radius: 5px;
        padding: 3px 6px;
        margin-right: 10px;
      }

      .no_release {
        color: #ff6600;
        font-size: 20px;
        line-height: 34px;
        display: inline-flex;
        background-color: rgba(#ff6600, 0.08);
        border-radius: 5px;
        padding: 3px 6px;
        margin-right: 10px;
      }

      // margin-bottom: 20px;
    }

    .content {
      margin-top: 20px;
      font-size: 24px;
      color: #989898;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;

      & img {
        width: 120px !important;
        height: 90px !important;
        margin-right: 15px;
      }

      & video {
        width: 250px;
        height: 200px;
        margin-right: 15px;
      }
    }

    .footer {
      margin-top: 15px;
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      font-size: 22px;

      .publisher {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #333333;
        // border-right: 1px solid #e3e3e3;
      }

      .line {
        width: 1px;
        height: 16px;
        background-color: #d9d9d9;
        margin: 0 15px;
      }

      .time {
        color: #999999;
      }

      .already_read {
        color: #999999 !important;
      }

      .no_read {
        color: #ff6600;
      }
    }
  }

  .already_read {
    color: #666666 !important;
  }

  // &::after {
  //   content: "";
  //   position: absolute;
  //   bottom: 0;
  //   left: 50%;
  //   transform: translateX(-50%);
  //   width: 92vw;
  //   height: 1px;
  //   background-color: #e3e3e3;
  //   border-radius: 1px;
  //   opacity: 0.72;
  // }
}

.card_container_F {
  position: relative;
  width: calc(100vw - 40px);
  display: inline-block;
  background-color: #ffffff;
  border-radius: 12px;
  font-size: 24px;
  margin: 0 20px;

  .img_container {
    float: left;
    width: 22%;

    .todo_img {
      border-radius: 8px;
      float: left;
      margin: 25px 10px 10px 25px;
      width: 128px;
      height: 128px;
    }

  }


  .lg_badge_B {
    width: auto;
    padding: 0 10px;
  }

  .todo_body {
    width: 70%;
    float: right;
    padding: 20px 40px 1px 0px;

    .title {
      vertical-align: middle;
      text-overflow: ellipsis;
      overflow: hidden;
      font-size: 30px;
      line-height: 40px;
      color: #000000;

      .title_blue {
        color: #0066ff;
        font-size: 24px;
        line-height: 40px;
        display: inline-flex;
        background-color: rgba(#0066ff, 0.08);
        border-radius: 5px;
        padding: 5px 12px;
        margin-left: 10px;
      }

      .title_green {
        color: #009900;
        font-size: 24px;
        line-height: 40px;
        display: inline-flex;
        background-color: rgba(#009900, 0.1);
        border-radius: 5px;
        padding: 5px 12px;
        margin-left: 10px;
        margin-top: 3px;
      }

      .urgent_txt {
        display: inline-block;
      }

      .already_release {
        color: #009900;
        font-size: 20px;
        line-height: 34px;
        display: inline-flex;
        background-color: rgba(#009900, 0.1);
        border-radius: 5px;
        padding: 3px 6px;
        margin-right: 10px;
      }

      .no_release {
        color: #ff6600;
        font-size: 20px;
        line-height: 34px;
        display: inline-flex;
        background-color: rgba(#ff6600, 0.08);
        border-radius: 5px;
        padding: 3px 6px;
        margin-right: 10px;
      }

    }

    .content {
      margin-top: 20px;
      font-size: 24px;
      color: #989898;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;

      & img {
        width: 120px !important;
        height: 90px !important;
        margin-right: 15px;
      }

      & video {
        width: 250px;
        height: 200px;
        margin-right: 15px;
      }
    }

    .footer {
      margin-top: 15px;
      margin-bottom: 32px;
      display: flex;
      align-items: center;
      font-size: 22px;

      .publisher {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #999;
      }

      .line {
        width: 1px;
        height: 16px;
        // background-color: #d9d9d9;
        margin: 0 15px;
      }

      .time {
        color: #999999;
      }

      .read_num {
        color: #999999;
        position: absolute;
        right: 32px;
        display: flex;
        align-items: center;

        .read_icon {
          width: 35px;
          height: 24px;
          background-size: cover;
          background-image: url(../../../images/eyes.svg);
          background-position-y: center;
          margin-right: 3px;
        }
      }

      .already_read {
        color: #999999 !important;
      }

      .no_read {
        color: #ff6600;
      }
    }
  }

  .already_read {
    color: #666666 !important;
  }

}

.pressed {
  background-color: #d8d8d8;
}
